<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./cart.css">
</head>

<body>
    <div class="box">
        <div class="container">
            <my-cart></my-cart>
        </div>
    </div>

    <script src="../../vue.js"></script>

    <script>
        var CartTitle = {
            props: ['name'],
            template: `
              <div class="title">{{ name }}的商品</div>
            `
        }

        var CartList = {
            props: ['list'],
            template: `
                <div>
                <div class="item" v-for='(item,index) in list'>
                    <img :src="item.img"/>
                    <div class="name">{{ item.name }}</div>
                    <div class="change">
                    <a href="" @click.prevent='$emit("cutevent",item.id)'>－</a>
                    <!-- ☆☆☆☆☆事件注册函数，函数中的最后一个参数（$event）可以获取事件对象 -->
                    <!-- ☆☆☆☆☆这里不使用 v-model 是因为 vue 不建议 在子组件中 直接修改 props 里的参数 -->
                    <input type="text" class="num" :value='item.num' @input='changeNum(item.id,$event)' />
                    <a href="" @click.prevent='$emit("addevent",item.id)'>＋</a>
                    </div>
                    <!-- 子组件向父组件传递值 -->
                    <div class="del" @click='$emit("del", index)'>×</div>
                </div>
                </div>
            `,
            methods: {
                changeNum(id, e) {
                    this.$emit('change-num', {
                        id: id,
                        num: e.target.value
                    })
                }
            }
        }

        var CartTotal = {
            props: ['list'],
            template: `
              <div class="total">
                <span>总价：{{tatol}}</span>
                <button>结算</button>
              </div>
            `,
            computed: {
                tatol() {
                    var a = 0
                    this.list.forEach(item => {
                        a += item.price * item.num
                    });
                    return a
                }
            }
        }

        Vue.component('my-cart', {
            data: function () {
                return {
                    uname: 'hh',
                    list: [{
                        id: 1,
                        name: 'TCL彩电',
                        price: 1000,
                        num: 1,
                        img: 'img/a.jpg'
                    }, {
                        id: 2,
                        name: '机顶盒',
                        price: 1000,
                        num: 1,
                        img: 'img/b.jpg'
                    }, {
                        id: 3,
                        name: '海尔冰箱',
                        price: 1000,
                        num: 1,
                        img: 'img/c.jpg'
                    }, {
                        id: 4,
                        name: '小米手机',
                        price: 1000,
                        num: 1,
                        img: 'img/d.jpg'
                    }, {
                        id: 5,
                        name: 'PPTV电视',
                        price: 1000,
                        num: 2,
                        img: 'img/e.jpg'
                    }]
                }
            },
            template: `
                    <div class="cart">
                    <cart-title :name='uname'></cart-title>
                    <cart-list :list='list' 
                        @change-num='change($event)'
                        @del='delCart($event)' 
                        @addevent='add($event)' 
                        @cutevent='cut($event)'>
                    </cart-list>
                    <cart-total :list='list'></cart-total>
                    </div>
                `,
            components: {
                'cart-title': CartTitle,
                'cart-list': CartList,
                'cart-total': CartTotal
            },
            methods: {
                change(params) {
                    this.list.some(item => {
                        if (item.id === params.id) {
                            if (params.num < 1) {
                                item.num = 0
                                return
                            }
                            item.num = params.num;
                            return true
                        }
                    })
                },
                delCart(index) {
                    this.list.splice(index, 1)
                },
                add(id) {
                    this.list.some(item => {
                        if (item.id === id) {

                            item.num++;
                            return true
                        }
                    })
                },
                cut(id) {
                    this.list.some(item => {
                        if (item.id === id) {
                            if (item.num < 1) {
                                item.num = 0
                                return
                            }
                            item.num--;
                            return true
                        }
                    })
                }
            },
        })

        var vm = new Vue({
            el: '.box',
            data: {}
        })
    </script>
</body>

</html>